<template>
  <view class="warp">
    <view class="warp_box">
      <view class="items active">
        <text class="text">全部</text>
      </view>
      <view class="items">
        <text class="text">二级分类</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
</script>

<style lang="scss" scoped>
.warp {
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
  // padding-left: 180rpx;
  .warp_box {
    // margin-top: calc(110rpx + 60px);
    background-color: #fff;
    // padding: 30rpx;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 22rpx;
    .items {
      width: 100%;
      border-radius: 5px;
      background-color: #edeff2;
      padding: 14rpx 0;
      text-align: center;
      transition: all 0.25s;
      .text {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 1;
        transition: all 0.25s;
      }
      &.active {
        background-color: #fdfbfa;
        .text {
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
          line-height: 1;
          font-family: pfm;
        }
      }
    }
  }
}
</style>
